<template>
  <m-layout>
    <mt-header slot="header" :title="title">
      <m-header-back slot="left"/>
    </mt-header>
    <div slot="body">
      <m-section :borderTop="false" class="plan-details">
        <m-divider>
          <mt-cell>
            <div class="big class-title" slot="title">{{`训练方式：${details.trainingName }`}}</div>
          </mt-cell>
        </m-divider>
        <e-heading>教学目标</e-heading>
        <p>{{details.trainingAim}}</p>
        <e-heading>重点领域</e-heading>
        <p>重点技术领域：{{details.techDomainInfo}}</p>
        <p>重点精神领域：{{details.mindDomainInfo}}</p>
        <e-heading>具体信息</e-heading>
        <p>训练时长：{{details.trainingDuration }}</p>
        <p>教学教法：{{details.teachingInfo }}</p>
        <p>训练次数：{{details.trainingTimes }}</p>
        <p>训练强度：{{details.trainingIntension }}</p>
        <p>技巧等级：{{details.skillLevel }}</p>
        <p>适用年龄段：{{details.ageInfo }}</p>
        <p>适用学员规模：{{details.scopeInfo }}</p>
        <p>场地及规模：{{details.placeInfo }}</p>
        <e-heading>所需材料</e-heading>
        <p>{{details.trainingTool }}</p>
        <e-heading>图示及描述</e-heading>
        <div v-for="(item, index) in details.imageInfo" :key="index">
          <p v-if="details.key">{{details.key}}</p>
          <div class="imgList">
            <m-flexbox wrap="wrap" :gutter="18">
              <m-flexbox-item :span="5" v-for="(img, i) in item.value" :key="i" >
                <img :src="img">
              </m-flexbox-item>
            </m-flexbox>
          </div>
          <!-- <div class="imgList">
            <img v-for="(img, i) in item.value" :key="i" :src="img">
          </div> -->
        </div>
        <e-heading>进阶内容</e-heading>
        <p>{{details.advancedContent}}</p>
        <e-heading>潜在问题及处理方式</e-heading>
        <p>{{details.processMode}}</p>
      </m-section>
    </div>
  </m-layout>
</template>

<script>
import { mapState } from 'vuex'
import PlanItem from './PlanItem'

export default {
  components: {
    PlanItem
  },
  computed: {
    ...mapState({
      details: state => state.program.planDetails
    })
  },
  data () {
    return {
      title: '训练方式详情'
    }
  },
  mounted () {
    this.$store.dispatch('program/planDetails', {styleId: this.$route.query.id})
  }
}
</script>

<style lang="scss" scoped>
  .class-title{
    text-align: center;
    font-weight: bold
  }
  .plan-details{
    padding-bottom: .24rem;
    p{
      margin: 0;
      padding-left: .52rem;
      padding-right: .34rem;
      position: relative;
      &::after{
        content: '';
        position: absolute;
        left: .26rem;
        top: .16rem;
        width: .08rem;
        height: .08rem;
        border-radius: 50%;
        background: $color-black-base;
      }
    }
    .imgList{
      padding-left: .52rem;
      padding-right: .34rem;
      text-align: center;
      img{
        width: 2.86rem;
        height: 1.54rem;
      }
    }
  }
</style>
